<template>
  <c-tabs v-model="tabValue" activeName="1" class="wot-process-leaf">
    <el-tab-pane name="1" :label="multLang('基本信息')">
      <ProcessLeafInfo :data="info.base"></ProcessLeafInfo>
    </el-tab-pane>
    <el-tab-pane name="2" :label="multLang('详情信息')">
      <ProcessLeafDetail :data="info.sub"></ProcessLeafDetail>
    </el-tab-pane>
    <el-tab-pane name="3" :label="multLang('处理人')">
      <ProcessLeafHandle :data="info.handle"></ProcessLeafHandle>
    </el-tab-pane>
  </c-tabs>
</template>
<script>
import ProcessLeafInfo from './ProcessLeafInfo.vue'
import ProcessLeafDetail from './ProcessLeafDetail.vue'
import ProcessLeafHandle from './ProcessLeafHandle.vue'
import { getProcessLeafData } from '@/http/api/v1/wot'
export default {
  name: 'ProcessLeaf',
  components: { ProcessLeafInfo, ProcessLeafDetail, ProcessLeafHandle },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tabValue: '1',
      info: {},
      form: {}
    }
  },
  computed: {},
  watch: {
    data() {
      this.query()
    }
  },
  beforeCreate() {},
  created() {
    this.query()
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    query() {
      const { node_id, node_type, pref_id } = this.data
      node_id &&
        node_type &&
        pref_id &&
        getProcessLeafData({
          node_id,
          node_type,
          pref_id
        }).then(({ data }) => {
          this.info = data || {}
        })
    }
  }
}
</script>
<style lang="scss">
.wot-process-leaf {
  height: 100%;
}
</style>
